import React from 'react'
import { Card, Col, Divider, Icon, message, Row, Timeline } from 'antd'
import { connect } from 'react-redux'
import NavMenu from './common/nav-menu'
import { withRouter } from 'react-router-dom'
import SerialDetailBox from './serial-detail-box'
import VideoDetailBox from './video-detail-box'
import { getSerial } from '../actions/serial'
import ApplicationModal from './common/application-modal'
import { apply } from '../actions/application'

const {Meta} = Card

class SerialDetailPage extends React.Component {
  state = {
    videoId: 0,
    isApplicationModalOpen: false,
    reason: ''
  }

  componentDidMount () {
    const {serialId} = this.props.match.params
    this.props.getSerial(serialId)
  }

  submitApplication = () => {
    const {reason} = this.state
    const {serial} = this.props
    this.props.apply({resourceId:serial.id,type:'serial',reason},()=>{
      message.success('申请成功')
      this.setState({isApplicationModalOpen:false})
    })
  }

  changeVideo = videoId => {
    const {serial} = this.props
    if (serial.isNeedSubscribe) {
      message.warning('请先订阅该系列')
      return
    }
    this.setState({videoId})
  }

  showSerialVideos = (serial, videoId) => {
    return serial.videos.map((video) => {
      return <Timeline.Item
        color='#595959'
        dot={video.id === videoId
          ? <Icon
            type="video-camera"
            className='serial-timeline-icon'
            theme="twoTone"
            twoToneColor="#1973ba"
          />
          : ''
        }>
        <Card
          className={video.id === videoId ? 'serial-video-card' : ''}
          hoverable
          bordered={false}
          onClick={()=>this.changeVideo(video.id)}
        >
          <Meta
            title={video.title}
            avatar={<img className='serial-img' alt='图片链接失效' src={video.coverUrl}/>}
            description={<span>作者：{serial.username}</span>}
          />
        </Card>
      </Timeline.Item>
    })
  }
  findCurrentVideo = (videoId) => {
    const {serial} = this.props
    const video = serial.videos.find(video => video.id === videoId)
    return Object.assign({}, video, {username: serial.username})
  }

  render () {
    const {serial} = this.props
    const {videoId,isApplicationModalOpen,reason} = this.state
    return <div>
      <NavMenu/>
      <Row gutter={50}>
        <Col span={17} className='box-padding'>
          {
            videoId > 0
              ? <VideoDetailBox video={this.findCurrentVideo(videoId)}/>
              : <SerialDetailBox serial={serial}/>
          }
        </Col>
        <Col span={7}>
          <div className='serial-margin'>

            <header>
              <h3 style={{display:'inline-block'}}>
                <b>
                <a onClick={() => this.setState({videoId: 0})}>{serial.title}</a>
                </b>
              </h3>
              <span style={{float: 'right'}}>
                {
                  serial.isNeedSubscribe
                    ?<a onClick={() => this.setState({isApplicationModalOpen: true})}>申请订阅</a>
                    :<span><Icon type="pushpin" />已订阅</span>
                }
              </span>
            </header>
          </div>
          <Divider className='serial-divider'/>
          <div className='serial-video'>
            <Timeline>
              {this.showSerialVideos(serial, videoId)}
            </Timeline>
          </div>
        </Col>
      </Row>
      <ApplicationModal
        isApplicationModalOpen={isApplicationModalOpen}
        submitApplication={this.submitApplication}
        closeApplicationModalOpen={()=>this.setState({isApplicationModalOpen:false})}
        changeReason={e=>this.setState({reason:e.target.value})}
        reason={reason}
      />
    </div>
  }
}

const mapStateToProps = ({serial}) => ({
  serial
})
const mapDispatchToProps = dispatch => ({
  getSerial: id => dispatch(getSerial(id)),
  apply: (application,callback) => dispatch(apply(application,callback))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SerialDetailPage))
